<template>
  <div style="background-color: #fff;">
    <div style="text-align:right;padding:20px">
      <el-button v-print="'#printTest'" type="success">打印</el-button>
    </div>
    <div id="printTest" class="bg" style="text-align: center;">
      <div v-for="(item,index) in printData" :key="index" class="printWrap">
        <div class="title">
          预算拨款凭证(支款凭证)
        </div>
        <div
          style="display: flex;margin-bottom: 8px;font-size: 10px;width: 725px;margin: 0 auto;padding-bottom: 8px;"
        >
          <div style="flex:3;text-align:left;margin-left: 30px;">
            <span>拨款日期:</span>
            <span class="common">{{ item.PAYDATE.split("-")[0] }}</span>
            <span>年</span>
            <span class="common">{{ item.PAYDATE.split("-")[1] }}</span>
            <span>月</span>
            <span class="common">{{ item.PAYDATE.split("-")[2] }}</span>
            <span>日</span>
          </div>
          <div style="flex:1;text-align:right;padding-right:36px">
            <span>第</span>
            <span class="common">{{ item.LSH }}</span>
            <span>号</span>
          </div>
        </div>
        <table style="display: inline-block;" class="table">
          <tbody>
            <tr>
              <td>
                <table width="100" style="border-spacing: 0;border-collapse: collapse;">
                  <tr>
                    <td
                      style="width: 35px;line-height: 27px;padding: 8px;border: 0px;border-right: 1px solid #464545;"
                    >
                      付款单位</td>
                    <td style="border:0px solid #464545">
                      <div class="common_style">
                        <span style="display: inline-block;width: 100%;">全 &nbsp &nbsp &nbsp
                          称</span>
                      </div>
                      <div class="common_style">
                        <span style="display: inline-block;width: 100%;">帐 &nbsp &nbsp &nbsp
                          号</span>
                      </div>
                      <div>
                        <span style="display: inline-block;width: 100%;">开 户 银 行</span>

                      </div>
                    </td>
                  </tr>
                </table>
              </td>
              <td style="width:260px">
                <table width="260" style="border-spacing: 0;border-collapse: collapse;">
                  <tr>
                    <td style="border:0px solid #464545;word-wrap:break-word;">
                      <div style=" border-bottom: 1px solid #464545;font-size: 9px;">
                        <span class="commonSpan">
                          {{ item.FKDX }}
                        </span>
                      </div>
                      <div style=" border-bottom: 1px solid #464545;font-size: 9px;">
                        <span class="commonSpan"> {{ item.FKZH }}</span>
                      </div>
                      <div style="font-size: 9px;">
                        <span class="commonSpan"> {{ item.FKYH }}</span>
                      </div>
                    </td>
                  </tr>
                </table>
              </td>
              <td>
                <table width="100" style="border-spacing: 0;border-collapse: collapse;">
                  <tr>
                    <td
                      style="width: 35px;line-height: 27px;padding: 8px;border: 0px;border-right: 1px solid #464545;"
                    >
                      收款单位</td>
                    <td style="border:0px solid #464545">
                      <div class="common_style">
                        <span style="display: inline-block;width: 100%;">全 &nbsp &nbsp &nbsp
                          称</span>
                      </div>
                      <div class="common_style">
                        <span style="display: inline-block;width: 100%;">帐号或地址</span>
                      </div>
                      <div>
                        <span style="display: inline-block;width: 100%;">开 户 银 行</span>

                      </div>
                    </td>
                  </tr>
                </table>
              </td>
              <td style="width:260px">
                <table width="260" style="border-spacing: 0;border-collapse: collapse;">
                  <tr>
                    <td style="border:0px solid #464545;word-wrap:break-word;">
                      <div style=" border-bottom: 1px solid #464545;font-size: 9px;">
                        <span class="commonSpan">
                          {{ item.SKDX }}
                        </span>
                      </div>
                      <div style=" border-bottom: 1px solid #464545;font-size: 9px;">
                        <span class="commonSpan">   {{ item.SKZH }}</span>
                      </div>
                      <div style="font-size: 9px;">
                        <span class="commonSpan"> {{ item.SKYH }}</span>
                      </div>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>

            <tr>
              <td style="width: 140px;height: 60px;" :colspan="2">
                <table
                  width="100%"
                  style="border-spacing: 0;border-collapse: collapse;    line-height: 50px;"
                >
                  <tr>
                    <td
                      style="width: 35px;line-height: 37px;border: 0px;border-right: 1px solid #464545;"
                    >
                      拨款金额</td>
                    <td style="border:0px solid #fff;word-wrap:break-word;">
                      <div style="display:flex;height:100%">
                        <div style="flex:1;margin-left:2px">
                          <div
                            style="line-height: 18px;
                                                margin-top: 25px;"
                          >人名币: </br>(大写)</div>

                        </div>
                        <div style="flex:6">
                          <div style="margin-left:10px;text-align:left;height:100%">
                            <span
                              style="    display: inline-block;
                                                    width: 100%;
                                                    margin-top: 20px;"
                            > {{ item.DX }}</span>
                          </div>
                        </div>
                      </div>
                    </td>

                  </tr>
                </table>
              </td>
              <td :colspan="2">
                <div style="    border-bottom: 1px solid #464545 ;">金 额 ( 小 写 )</div>
                <span
                  style="    display: inline-block;
                            margin-left: 100px;"
                > ¥ {{ item.PAYMONEY }}</span>
              </td>

            </tr>
            <tr>
              <td style="width: 140px;" :colspan="2">
                <table
                  width="100%"
                  style="border-spacing: 0;border-collapse: collapse;    line-height: 50px;"
                >
                  <tr>
                    <td
                      style="width: 35px;line-height: 35px;border: 0px;border-right: 1px solid #464545;"
                    >
                      用途</td>
                    <td style="border:0px solid #fff">
                      <div style="display:flex;height:100%">
                        <span
                          style="    display: inline-block;
                                            margin-left: 10px;
                                            width: 100%;
                                            text-align: left;    line-height: 15px;word-wrap:break-word;padding: 4px"
                        >
                          {{ item.BZ }}</span>
                      </div>
                    </td>

                  </tr>
                </table>
              </td>
              <td :colspan="2">
                <div style="display:flex">
                  <div style="flex:1">
                    <span>类:</span>
                    <span class="common">{{ item.CFUNCTION1 }}</span>
                  </div>
                  <div style="flex:1">
                    <span>款:</span>
                    <span class="common">{{ item.CFUNCTION2 }}</span>
                  </div>
                  <div style="flex:1">
                    <span>项:</span>
                    <span class="common">{{ item.CFUNCTION3 }}</span>
                  </div>

                </div>

              </td>
            </tr>
            <tr>
              <td style="width: 140px;height: 50px;" :colspan="2">
                <div
                  style="    text-align: center;
                            margin-top: -45px;
                            margin-left: -144px;
                            letter-spacing: 3px;"
                >
                  拨款单位盖章:
                </div>
              </td>
              <td :colspan="2">
                <table style="border-spacing: 0;border-collapse: collapse;width:100%;">
                  <tr>
                    <td
                      style="width: 35px;line-height: 15px;padding: 8px;border: 0px;border-right: 1px solid #464545;"
                    >
                      银行会计分录</td>
                    <td style="border:0px solid #464545;width: 100%;">
                      <div
                        style="    text-align: left;
                                      margin-left: 15px;"
                      >
                        <span>
                          ( 借 )
                        </span>
                        <span> __________________</span>
                      </div>
                      <div
                        style="    text-align: right;
                                        margin-right: 15px;"
                      >
                        <span>
                          对方科目
                        </span>
                        <span> ___________________</span>
                      </div>
                      <div style="display: flex;">
                        <div style="flex: 1;"> 复核员:</div>
                        <div style="flex: 2;" />
                        <div style="flex: 1;"> 记账员:</div>
                        <div style="flex: 2;" />

                      </div>

                    </td>
                  </tr>
                </table>
              </td>

            </tr>
          </tbody>
        </table>
      <!-- </div> -->

      </div>

    </div>

  </div></template>

<script>
import { getQueryBodyByProduce } from '@/api/dynamicInterface/index';
import { digitUppercase } from '@/utils/utils';
export default {
  data() {
    return {
      printData: []
    };
  },
  created() {
    getQueryBodyByProduce({
      'tableId': 835,
      'pageIndex': 0,
      'pageSize': 1000,
      'pageType': 1,
      'filterList': [
        {
          'col': 'FORMGUID', // 字段
          'value': this.$route.query.formList, // 勾选的字段值
          'symbol': 'in'
        }
      ],
      'cprogramname': ''
    }).then(res => {
      if (res.success) {
        res.data.map(o => {
          o.DX = digitUppercase(Number(o.PAYMONEY));
        });
        this.printData = res.data;
      } else {
        this.printData = [];
      }
    });
    // this.printData = JSON.parse(localStorage.getItem('printDate'));
    // console.log(this.printData);
  }
};

</script>

<style lang='scss' scoped>
    * {
        font-size: 12px !important;
    }

    @page{
          size: auto A4 landscape;
          margin: 3mm;
      }

    .table {
        border-spacing: 0;
        border-collapse: collapse;
        margin-top: 1px;
        padding: 0px;
        margin: 0px;
        table-layout: fixed;

        td {
            height: 40px;
            line-height: 37px;
            border: 1px solid #464545;
            color: #464545;

            text-align: center;
            font-size: 10px;
        }
    }

    .title {
        margin-bottom: 15px;
        text-align: center;

        letter-spacing: 5px;
        font-size: 22px !important;
        font-family: monospace;
    }

    .common_style {
        border-bottom: 1px solid #464545;
    }

    .commonSpan {
        max-width: 320px;
        display: inline-block;
        padding: 0px 5px;
        text-align: left;
        line-height: 12px;
        width: 100%
    }

    .printWrap {
        margin-bottom: 180px;
    }
</style>
